import React from 'react';
import {StyleSheet, TextInput, View} from 'react-native';

type Styles = {
  color?: string;
  fontSize?: number;
  borderRadius?: number;
  borderWidth?: number;
  borderColor?: string;
};
interface InputType {
  styles: Styles;
  before?: Element;
  value?: string;
  placeholderColor?: string;
  placeholder?: string;
  onChange?: (text: string) => void;
  [key: string]: any;
}

export default function Input(
  {
    styles,
    before,
    value,
    placeholder,
    placeholderColor,
    onChange,
    ...other
  }: InputType = {
    styles: {},
  },
) {
  const {color, fontSize = 18, ...comtainerStyles} = styles;
  return (
    <View
      style={{
        ...comtainerStyles,
        ...inputStyles.inputContainer,
      }}>
      {before}
      <TextInput
        {...other}
        style={{
          flex: 1,
          fontSize: fontSize,
          paddingLeft: 5,
          color: color || '#000',
        }}
        placeholder={placeholder}
        placeholderTextColor={placeholderColor}
        autoCapitalize="none"
        autoCorrect={false}
        value={value}
        onChangeText={(val) => (onChange ? onChange(val) : () => {})}
      />
    </View>
  );
}

const inputStyles = StyleSheet.create({
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
    padding: 10,
  },
});
